<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm creatuif"
    :size="formSize"
    status-icon
  >
    <el-row>
      <el-col :span="24">
        <el-form-item label="考生姓名" prop="nick">
          <el-input v-model="ruleForm.nick" style="width: 320px" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="性别" prop="sex">
          <el-select
            :popper-options="{
              modifiers: [
                { name: 'computeStyles', options: { adaptive: false } },
              ],
            }"
            v-model="ruleForm.sex"
            placeholder="请选择性别"
            style="width: 200px"
          >
            <el-option label="男" value="0" />
            <el-option label="女" value="1" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="民族" prop="region">
          <el-select
            :popper-options="{
              modifiers: [
                { name: 'computeStyles', options: { adaptive: false } },
              ],
            }"
            v-model="ruleForm.nation"
            placeholder="请选择民族"
            style="width: 200px"
          >
            <el-option
              v-for="(item, index) in clanlist"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="高考省份" prop="s_province">
          <el-select
            :popper-options="{
              modifiers: [
                { name: 'computeStyles', options: { adaptive: false } },
              ],
            }"
            v-model="ruleForm.pid"
            placeholder="请选择高考省份"
            style="width: 200px"
          >
            <el-option
              v-for="(item, index) in provincelist"
              :key="item.val"
              :label="item.name"
              :value="item.val"
              @click="onClickSelectProvince(item, index)"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="高考年份" prop="graduate_time">
          <el-select
            v-model="ruleForm.graduate_time"
            placeholder="选择高考年份"
            style="width: 200px"
          >
            <el-option
              v-for="item in gaokaoyear"
              :key="item.val"
              :label="item.name"
              :value="item.val"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="学校" prop="s_province">
          <el-select
            v-model="ruleForm.s_province"
            placeholder="请选择省份"
            style="width: 200px"
            disabled
          >
            <!-- <el-option v-for="(item,index) in arealist" :key="item.val" :label="item.name"
							:value="item.val" /> -->
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="" prop="region">
          <el-select
            :popper-options="{
              modifiers: [
                { name: 'computeStyles', options: { adaptive: false } },
              ],
            }"
            v-model="ruleForm.s_city"
            placeholder="请选择城市"
            style="width: 200px"
            @change="citychange"
            :disabled="ruleForm.s_province.length == 0"
          >
            <el-option
              v-for="item in cityList"
              :key="item.code"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="" prop="region">
          <el-select
            :popper-options="{
              modifiers: [
                { name: 'computeStyles', options: { adaptive: false } },
              ],
            }"
            v-model="ruleForm.s_district"
            placeholder="请选择"
            style="width: 200px"
            :disabled="ruleForm.s_city.length == 0"
          >
            <el-option
              v-for="item in areaDate"
              :key="item.code"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="学校名称" prop="name">
          <el-input v-model="ruleForm.s_school" style="width: 320px" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="父亲" prop="region">
          <el-input
            v-model="ruleForm.f_name"
            placeholder="父亲名称"
            style="width: 320px"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="电话" prop="region">
          <el-input
            v-model="ruleForm.f_phone"
            placeholder="父亲手机号码"
            style="width: 320px"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="职业" prop="region">
          <el-input
            v-model="ruleForm.f_career"
            placeholder="父亲职业"
            style="width: 320px"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="母亲" prop="region">
          <el-input
            v-model="ruleForm.m_name"
            placeholder="母亲名称"
            style="width: 320px"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="电话" prop="region">
          <el-input
            v-model="ruleForm.m_phone"
            placeholder="母亲手机号码"
            style="width: 320px"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="职业" prop="region">
          <el-input
            v-model="ruleForm.m_career"
            placeholder="母亲职业"
            style="width: 320px"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="备注" prop="region">
          <el-input
            v-model="ruleForm.remark"
            placeholder=""
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 3 }"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item class="form-footer-btn aaa" style="position: unset">
      <el-button @click="resetForm(ruleFormRef)"> 上一步 </el-button>
      <el-button type="primary" @click="submitForm(ruleFormRef)" color="#165dff"
        >下一步</el-button
      >
    </el-form-item>
  </el-form>
</template>
<script setup>
import { ref } from 'vue';
import clan from '@/utils/clan.js';
import { getAreaChilds } from '@/api/leader/Filling.js';

const emit = defineEmits(['upChange']);

const props = defineProps({
  provincelist: {
    type: Array,
    default: [],
  },
  gaokaoyear: {
    type: [Array, Object],
    default: () => ({}),
  },
});
const formSize = ref('default');
const ruleFormRef = ref();
const ruleForm = reactive({
  nick: '', // 名字
  sex: '', // 性别0-男 1-女
  nation: '', // 民族
  pid: '', // 高考省ID
  province: '', // 高考省名称
  graduate_time: '', // 高考年份
  s_province: '', // 学校所在省
  s_city: '', // 学校所在城市
  s_district: '', // 学校所在区
  s_school: '', // 学校名称
  f_name: '', // 父亲姓名
  f_phone: '', // 父亲电话
  f_career: '', // 父亲职业
  m_name: '', // 母亲姓名
  m_phone: '', // 母亲电话
  m_career: '', // 母亲职业
  remark: '', // 备注
});

const rules = reactive({
  nick: [
    {
      required: true,
      message: '请输入姓名',
      trigger: 'blur',
    },
  ],
  sex: [
    {
      required: true,
      message: '请选择性别',
      trigger: 'change',
    },
  ],
  s_province: [
    {
      required: true,
      message: '请选择省份',
      trigger: 'change',
    },
  ],
  graduate_time: [
    {
      required: true,
      message: '请选择高考年份',
      trigger: 'change',
    },
  ],
});

const clanlist = ref(clan);
const arealist = ref([]);
const cityList = ref([]);
const areaDate = ref([]);

function citychange(val) {
  const dateinfo = cityList.value.find((item) => item.name === val);
  areaDate.value = dateinfo.childs;
  ruleForm.s_district = '';
}

const onClickSelectProvince = (item, index) => {
  ruleForm.province = item.name;
  ruleForm.s_province = item.name;

  getAreaChilds({ pid: item.val }).then((res) => {
    cityList.value = res.data['0']['childs'];
  });

  arealist.value = props.provincelist[index].areaChilds;
};

function submitForm(ruleFormRef) {
  ruleFormRef.validate((valid) => {
    if (valid) {
      emit('upChange', 2, 3, ruleForm);
    }
  });
}

function resetForm(val) {
  emit('upChange', 2, 1, val);
}
</script>
<style lang="scss">
.creatuif {
  .aaa {
    .el-form-item__content {
      margin: 0 !important;
      justify-content: end;
      border-top: 1px solid #e5e6eb;
      padding-left: 24px;
      padding-right: 24px;
      padding-top: 16px;
    }
  }
}
</style>
